// 处理全局导航守卫的路由跳转的
import router from '@/router'
import store from '@/store'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 白名单页面
const whiteList = ['/login', '/404', '/404/1', '/404/2']
console.log(23)
console.log(23)
// vuex的数据流向
// 获取用户信息的处理逻辑
router.beforeEach(async(to, from, next) => {
  Nprogress.start()
  console.log('全局导航守卫 >> beforeEach')
  // 是否有token，user模块里面取出token
  const token = store.state.user.token
  if (token) {
    if (!store.getters.userId) {
      // dispatch默认就是一个promise
      // 请求了当前用户的个人信息，个人信息里面有menus,我们需要获取menus进行动态路由的筛选
      const {
        roles: { menus }
      } = await store.dispatch('user/getUserInfoAction')
      // 筛选得到动态路由数组的时候，会把动态路由数组和静态路由数组合并存储到vuex里面【渲染左侧菜单】
      const newRoutes = await store.dispatch('permission/filterRoutes', menus)
      // console.log(newRoutes)
      // 调用addRoutes添加到路由里面去
      // 进行动态路由的添加，接收的参数是路由数组
      // 通过vuex里面的routes渲染的
      // 左侧菜单仅仅是一个展示，
      // 动态添加路由表
      // vuex[动态路由和静态路由合并存储vuex] => 左侧菜单渲染
      router.addRoutes([
        ...newRoutes,
        { path: '*', redirect: '/404', hidden: true } // 【404路由要在所有路由的最后面】
      ])
      // 添加完毕以后，还要重新再跳转一次
      next(to.path)
    }
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 关闭进度条效果
  Nprogress.done()
})

router.beforeResolve((to, from, next) => {
  console.log('全局导航守卫 >> beforeResolve')
  next()
})

router.afterEach(() => {
  console.log('全局导航守卫 >> afterEach')
})
// 路由跳转完毕以后，关闭进度条
// this code is used to show the user that the page is loading
// router.beforeEach((to, from, next) => {
//   Nprogress.start()
//   next()
// })

// 通过路由的前置导航守卫  beforeEach里面进行拦截

// 1、路由跳转之前，进行路由权限拦截
// 开启一个进度条
// 2、有token
//    1. 去登录界面 -> next('/')
//    2. 不是登录页面 -> next()
// 3、没有token
//    1.去的页面是白名单页面(不需要权限的页面) -> next()
//    2.去的页面不是白名单（需要权限的页面 -> 跳转到login

// 跳转完毕，关闭进度条

/**
 * 1、处理按钮权限的逻辑
 *    mixins混入【用的较少】
 *    自定义指令【推荐使用】
 *
 *  2、定义一个自定义指令，接收一个需要检测的权限点字符串
 *  3、inersted钩子里面，获取到传递过来的权限点标识
 *  4、判断当前用户是否拥有这个权限点标识，如果没有，证明该用户没有操作这个按钮的权限
 *  5、直接调用dom.remove()方法移除这个dom节点
 *  6、界面上面看不到删除的按钮
 */

/**
 * 已经到员工页面了，管理员把权限删除了
 * 删除的时候再判断一次
 * 接口会处理【api权限】
 * 如果不走接口怎么判断
 * websocket
 */

// mixins有哪些使用场景？
// 1、所有逻辑复用的地方都可以考虑使用。
// 2、vuex取数据的时候。

//

/**
 * mixins: 混入【逻辑复用】
 * 缺点：1、数据的来源不清晰
 *      2、变量可能会冲突
 *      3、代码不是特别好维护
 */
// hooks

// 插槽
// 当我们封装一个自定义组件的时候，如果内部的部分结构不确定，这时候用到插槽把结构进行动态传入
